<template>

<nav class="nav2">
<!--{{msg}}-->
    <div class="div2">
        <div v-for="(item,index) in newmusiclist" :key="index">
           <ul class="hahalist">
<!--                                        跳转-->
<!--               <router-link to="/Songdetails">-->
               <router-link :to="{path:'/Songdetails',query:{songID:item.id}}">

               <li><img src="../assets/img/sq.png" alt=""><span> {{item.name}} </span>
                   <br><span>{{item.song.artists[0].name}}</span>
                   <img src="../assets/img/minplay.png" alt=""></li>
                   </router-link>

           </ul>
        </div>
    </div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="flex">

    </div>

</nav>


</template>
<script>

    export default {
        data() {
            return {
                active: 1,
                newmusiclist: [],
                // msg:'啊哈哈哈'
            };
        },
        created() {
            this.axios.get("/music-api/personalized/newsong").then((res) => {
                console.log(res);
                this.newmusiclist = res.data.result
            })
        },
        components: {},

    };
</script>
<style lang="less" scoped>

    .hahalist li{
        position: relative;
        padding-left: 35px;
        height: 42px;
        color: #666666;

    }
    .hahalist img:nth-of-type(1){
        position: absolute;
        left: 0px;
        top: 20px;
    }
    .hahalist img:nth-of-type(2){
        position: absolute;
        right: 5px;
        top: 0px;
    }




</style>